<style>
.layout {
  background: #000;
}

.l--wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 485px;
  height: 540px;
}

svg {
  width: 485px;
  height: 540px;
  /*   border: 1px solid red; */
}

text {
  stroke-width: 10;
  stroke-opacity: .5;
  font-family: 'Francois One', sans-serif;
  font-size: 12em;
}

.t--water {
  fill: url(#pt--water);
  stroke: #004384;
}

.t--fire {
  fill: url(#pt--fire);
  stroke: #4d0000;
}

.t--and {
  fill: none;
  stroke-width: 5;
  stroke: #3a434d;
  font-size: 7em;
}

rect {
  fill: url(#pt--fire);
  stroke: #4d0000;
}
</style>

<div class="layout">
  <svg>
    <pattern id="pt--water" viewBox="0 0 256 256"
      width="256" height="256" patternUnits="userSpaceOnUse">
      <image xlink:href="v/graph-svg/text-bg/water.gif" width="256" height="256"/>
    </pattern>

    <pattern id="pt--fire" viewBox="30 100 186 200"
      width="216" height="200" patternUnits="userSpaceOnUse"
      x="-60" y="-100">
      <image xlink:href="v/graph-svg/text-bg/fire.gif" width="256" height="300"/>
    </pattern>

    <text x="50%" y="155" class="t--water" text-anchor="middle">Water</text>
    <text x="50%" y="280" class="t--and" text-anchor="middle">&</text>
    <text x="50%" y="470" class="t--fire" text-anchor="middle">Fire</text>

    <!-- <rect width="400" height="400"></rect> -->
  </svg>
</div>